<template>
  <div class='people bc-gray'>
    <div class='common-tabs bc-green'>
      <van-tabs color="red" v-model="active" @click="changeTabs">
        <van-tab v-for="(item,index) in getList" :key="index" :title="item.title">
          <ul class="list-box">
            <li class="bc-white" v-for="(opt, optIndex) in item.data" :key="optIndex">
              <img :src="opt.wx_pic||opt.photo||defaultImg" alt="">
              <p>{{opt.name}}({{opt.number}})</p>
            </li>
            <p class="no-data bc-gray">没有多的数据了哦~</p>
          </ul>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import MixIns from "@/mixin/mixin.js";
export default {
  components: {},
  name: "",
  data() {
    return {
      active:0,
      defaultImg:require("../../../assets/images/home/default.jpg")
    };
  },
  computed:{
    getList(){
      var menuData=[
        {title:"已收到",data:this.detailData.receive},
        {title:"未收到",data:this.detailData.unreceive}
      ]
      return menuData
    }
  },
  methods: {
    changeTabs(){

    }
  },
  created() {},
  mixins: [MixIns]
};
</script>
<style lang="scss" scoped>
.people {
  height: 100%;

  .common-tabs{
    height: 100%;
  }
  ul.list-box{
    height: calc(100% - 100px);
    overflow: auto;
  }

  li{
    padding: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
    display: flex;
    font-size: 16px;
    color: #666;
    line-height: 120px;

    img{
      width: 120px;
      height: 120px;
      margin-right: 20px;
      border-radius: 50%;
      box-shadow: 1px 1px 3px 1px #333;
    }
  }
}
</style>